<template>
	<div class="root">
		<my-header htitle="脱胶" :date="date"></my-header>
		<count-info :waitMatTotal="waitMatTotal"
    	             :makeMatTotal="makeMatTotal"
    	             :finishedDayCount="finishedDayCount"
    	             :finishedMonthCount="finishedMonthCount"
    	             :outboundDay="outboundDay"
    	             :damageDay="damageDay" ></count-info>

    	<div class="content">
    	  	    <div class="con-left-group">
    	  	    	<isqualified :list="isqualifiedList"></isqualified>
    	  	    	<div class="h28"></div>
    	  	    	<notice noticeTitle="反馈通知"></notice>
    	  	    	<div class="h22"></div>
    	  	    	<stagnation :list="stagnationList" :abnormalInfo="abnormalInfo"></stagnation>	

    	  	    </div>
    	  	    <div class="con-right-group">
                     <plan :list="planList"></plan>
                     <div class="h30"></div>   
                     <div class="fin-abnor">
                     	  <finished-xq :list="finishedXqList"></finished-xq>
                     	   <div class="abnormal-group">
                     	   	     <notice noticeTitle="异常信息"></notice>
                     	   	     <div class="h22"></div>
                     	   	     <abnormal-info :list="abnormalInfoList"></abnormal-info>
                     	   </div>
                     </div> 
    	  	    </div>
    	</div>             
	</div>
</template>
<script>
import MyHeader from '@/components/Header'
import CountInfo from './components/CountInfo'
import Isqualified from '@/components/Isqualified'
import Notice from '@/components/Notice'
import Stagnation from '@/components/Stagnation'
import Plan from '@/components/Plan'
import FinishedXq from './components/FinishedXQ'
import AbnormalInfo from './components/AbnormalInfo'

import {getTuoJiao,getTuoJiaoPlan,gettjFeedback} from "../../api/chart"



export default{
	components:{
       MyHeader,
       CountInfo,
       Isqualified,
       Notice,
       Stagnation,
       Plan,
       FinishedXq,
       AbnormalInfo
	},
	data () {
		return{
            date:'',
		    waitMatTotal:'',
	    	makeMatTotal:'',
	    	finishedDayCount:'',
	    	finishedMonthCount:'',
	    	outboundDay:'',
	    	damageDay:'',
	    	abnormalInfo:'',
	    	isqualifiedList:[],
	    	planList:{},
	    	abnormalInfoList:[],
	    	stagnationList:[],
	    	finishedXqList:[]

		}
	},
	methods:{
        getInfo () {
     	    getTuoJiao().then((data)=>{
                this.date = data.date
                this.waitMatTotal = data.degumWait
                this.makeMatTotal = data.degumHand
                this.finishedDayCount = data.degumCount
                this.finishedMonthCount = data.monthDegumCount
                this.outboundDay = data.unloadWait
                // this.damageDay = data.
            }).catch((error) => {
                console.log(error)
            })
 
            getTuoJiaoPlan().then((data) => {
                this.planList = data.msg
            }).catch((error) => {
                 console.log(error)
            })

            gettjFeedback().then((data)=>{
                
            }).catch((error) => {
                 console.log(error)
            })
        }
     
  },
  mounted () {
       clearTimeout(timer)
        this.getInfo()
        var timer = setInterval(()=>{
            this.getInfo()
        },10000)
  }
}
</script>
<style scoped>

.root{
   background:#383A53;
    width:1920px;
    height:1080px;
}
	
.content{
    width:100%;
    box-sizing:border-box;
    padding-left:30px;
    padding-right:30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.con-left-group,.con-right-group{
    width:914px;
    height:770px; 
}
			
.fin-abnor{
    width:914px;
    height:652px;
    display: flex;
    justify-content: space-between;
    align-items:flex-start;     
}
		
.abnormal-group{
    width: 620px;
}


.h28{
    height:28px;
    width:100%;
}
	
.h22{
    height:22px;
    width:100%;
}
	
.h30{
    height:30px;
    width:100%;
}
	
			
</style>